<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
       <!-- 所属分类：级联下拉列表 -->
       <!-- 一级分类 -->
       <el-form-item label="查询学校">
         <el-select
           v-model="dataQuery.schoolId"
           placeholder="学校"  @change="SchoolChanged">
           <el-option
             v-for="school in schoolList"
             :key="school.id"
             :label="school.name"
             :value="school.id"/>
          </el-select>
          <!-- 二级分类 -->
          <el-select v-model="dataQuery.collageId"
          placeholder="学院" >
            <el-option
              v-for="collage in collageList"
              :key="collage.id"
              :label="collage.name"
              :value="collage.id"/>
          </el-select>
         </el-form-item>

          <el-form-item label="添加时间">
            <el-date-picker
              v-model="dataQuery.begin"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="dataQuery.end"
              type="datetime"
              placeholder="选择截止时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            />
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

        <!-- 表格 -->
        <el-table
          :data="list"
          border
          fit
          highlight-current-row>

          <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
              {{ (page - 1) * limit + scope.$index + 1 }}<!-- 这个算法得到序号1，2，3...-->
            </template>
          </el-table-column>

          <el-table-column prop="name" label="学校或学院"  />
          <el-table-column prop="areaName" label="地区"  />
          <el-table-column prop="existingDiagnosis" label="现有确诊"/>

          <el-table-column prop="asymptomatic" label="无症状" />
          <el-table-column prop="suspected" label="疑似" />
          <el-table-column prop="severe" label="重症" />
          <el-table-column prop="totalDiagnosis" label="累计确诊" />
          <el-table-column prop="overseasInput" label="境外输入" />
          <el-table-column prop="totalCure" label="累计治愈" />
          <el-table-column prop="totalDeath" label="累计死亡" />
          <el-table-column prop="totalVaccines" label="疫苗接种人数" />
          <el-table-column prop="vaccinesProportion" label="疫苗接种率" />
          <el-table-column prop="gmtCreate" label="添加时间" width="160"/>



        </el-table>
           <!-- 分页 -->
            <el-pagination
              :current-page="page"
              :page-size="limit"
              :total="total"
              style="padding: 30px 0; text-align: center;"
              layout="total, prev, pager, next, jumper"
              @current-change="getList"
            />
  </div>
</template>

<script>
  //引入teacher.js文件
  import epidemic from'@/api/epidemic/epidemic'

  export default {
    //写核心代码
   data() {//定义当前页面变量及设定初始值
     return {
       page:1,//当前页
       limit:10,//每页的记录数
       total:0,//总记录数
       dataQuery:{
         schoolId:0,
         collageId:0,
         begin:'',
         end:''
       },//条件查询封装的对象
       list:[],//查询之后接口返回的集合
       schoolList:[],
       collageList:[]
     }
   },

    created(){//页面渲染之前执行，一般都是调用methods里面的方法
      this.getList()
      this.getSchoolList()
    },

    methods:{//创建具体的方法，调用teacher.js里面定义的方法
    getList(page = 1){//默认page为1，上面实践绑定中：@current-change="getList"会自动把当前页当作参数传进来
      this.page=page
      epidemic.getSchoolEpidemicListPage(this.page,this.limit,this.dataQuery)
      .then(response=>{//请求成功
        //console.log(response)
        //为变量赋值
        this.total=response.data.total
        this.list=response.data.rows
        //console.log(this.list)
        //console.log(this.total)
      })
      .catch(error=>{//请求失败
        this.$message({
          type: 'error',
          message: error.message
        });

      })
    },
    resetData(){//清空功能
      //1.清空查询的数据
     this.dataQuery.schoolId=0,
     this.dataQuery.collageId=0,
     this.dataQuery.begin='',
     this.dataQuery.end='',
     //2.查询所有讲师数据
     this.getList()
    },
    //加载学校
    getSchoolList(){
      epidemic.getSchool()
      .then(response=>{
        this.schoolList=response.data.schoolList
      }).catch(error=>{
        this.$message({
          type: 'error',
          message: error.message
        });
      })
    },
    //点击国家加载学院
    SchoolChanged(value){
      this.getCollageList(value)
    },
    //根据国家id加载学院信息
    getCollageList(schoolId){
      epidemic.getCollage(schoolId)
          .then(response=>{
            this.collageList=response.data.collageList
          }).catch(error=>{
            this.$message({
              type: 'error',
              message: error.message
            });
          })
    }

   }
  }
</script>

<style>
</style>
